<template>
  <custom-navbar title="分类" :leftIcon="true"></custom-navbar>
  <up-cate-tab class="cate-tab" :tabList="tabList" tabKeyName="title" itemKeyName="title">
    <template #pageItem="{ pageItem }">
      <view class="w-full">
        <up-cell-group :border="false">
          <up-cell :border="false">
            <template #icon>
              <up-image :src="pageItem.cover" width="100px" height="100px"></up-image>
            </template>
            <template v-slot:title>
              <view>
                {{ pageItem.title }}
              </view>
            </template>
            <!-- <template v-slot:label>
              <view class="h-100 pt-1">
                <text class="text-md text-red">￥{{ pageItem.price }}</text>
              </view>
            </template> -->
            <!-- <template v-slot:value>
              <up-number-box></up-number-box>
            </template> -->
          </up-cell>
        </up-cell-group>
      </view>
    </template>
  </up-cate-tab>
  <custom-tabbar :index="1" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { categoryListApi } from '@/api/goods/index.js'

// 响应式数据
const tabList = ref([])
const queryList = () => {
  categoryListApi().then((res) => {
    tabList.value = res[0].children.map((item) => ({
      title: item.categoryName,
      children: item.children.map((child) => ({
        title: child.categoryName,
        cover: child.categoryIcon
      }))
    }))
  })
}
onMounted(() => {
  queryList()
})
</script>
<style lang="scss" scoped>
.cate-tab {
  height: calc(100vh - 150px) !important;
  /* #ifdef H5 */
  height: calc(100vh - 150px - var(--window-top)) !important;
  /* #endif */
}
</style>
